<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>${page.title}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/xadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/zsa-common.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/layui/layui.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/back/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .zsa-close {
            line-height: 36px;
            margin-left: 5px;
            border-radius: 9px;
            border: 1px solid #FF5722;
            color: #FF5722;
            cursor: pointer;
        }

        .zsa-close:hover {
            border-color: red;
            color: red;
        }
    </style>
</head>

<body>
<div class="x-nav">
    <%--<span class="layui-breadcrumb">--%>
    <%--<a href="">首页</a>--%>
    <%--<a href="">演示</a>--%>
    <%--<a>--%>
    <%--<cite>导航元素</cite></a>--%>
    <%--</span>--%>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
</div>
<div class="x-body">
    <c:forEach var="table" items="${tables}">
        <table id="${table.id}-table" lay-filter="${table.id}-table" class="layui-hide zsa-auto-height"></table>
    </c:forEach>
</div>
<script type="text/html" id="sys_toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="sys_refresh"><i class="layui-icon"
                                                                      style="line-height:30px">&#xe669;</i>
    </button>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit-table"><i class="layui-icon">&#xe642;</i>编辑表格&nbsp;</a>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/dateFormat.js"
        charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/httptTools.js"
        charset="utf-8"></script>
<jsp:include page="/WEB-INF/page/layui_version.jsp"></jsp:include>

<script>
    layui.extend({
        complexSearch: 'complexSearch/complexSearch' // {/}的意思即代表采用自有路径，即不跟随 base 路径
    })
    layui.use(['table', 'form', 'lutil', 'complexSearch'], function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            lutil = layui.lutil,
            complexSearch = layui.complexSearch,
            height = $(window).height() - $('.x-nav').outerHeight() - 50,
            height_value = height > 300 ? parseInt(height) : 300;

        var wait = false, table_classs = [], getTable = function (id) {
            var that_table;
            $.each(table_classs, function (i, e) {
                if (e.config.id == id || e.config.index == id) return that_table = e, false;
            });
            return that_table;
        }, tableDatas = ${tablesData};
        table.set({
            method: 'POST',
            height: height_value,
            text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            headers: {'${_csrf.headerName}': '${_csrf.token}'},
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                // statusName: 'success' //数据状态的字段名称，默认：code 加上有问题
                statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
        });
        $.each(tableDatas, function (k, v) {
            // 提取 字段 用于搜索
            var table_search_fields = [];
            $.each(v.cols[0], function (i, e) {
                if (e.dataField == true && e.canScreen == true)//&& e.field != undefined
                    table_search_fields.push($.extend({}, e.searchs, {field: e.field, title: e.title}));
            });
            // 初始化表格
            var thisTable = table.render(v);
            // 保存表格实例
            table_classs.push(thisTable);
            // 绑定排序
            table.on('sort(' + k + '-table)', function (obj) {
                if (v['autoSort'] == false) // 是否提供服务器排序
                    thisTable && thisTable.sort(obj);
            });
            // 绑定头部工具栏事件
            table.on('toolbar(' + k + '-table)', function (obj) {
                var checks = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'sys_refresh': //刷新
                        thisTable && thisTable.refresh();
                        break;
                    // case 'sys_search': //搜索
                    //     break;
                    //     var content = $(table_searchs[k]), item = $(search_temp_item),
                    //         selectHtml = '<option value=""></option>';
                    //     if (content.html() == undefined) {
                    //         $.each(table_search_fields[k], function (i, e) {
                    //             selectHtml = selectHtml + '<option value="' + e.field + '">' + e.title + '</option>';
                    //         });
                    //         content = $(search_temp), item.attr('zsa-item-index', "index" + 0), item.find('select[name=fieldName]').html(selectHtml),
                    //             content.attr('zsa-id', k), content.attr("lay-filter", k + "-form"), content.find(".search-content").append(item)
                    //             , content.find('button.search-submit').attr('lay-filter', k + '-search')
                    //     }
                    //     lutil.open_page("条件搜索", content.prop("outerHTML"), function (index, layero) {
                    //         layero.find('.layui-layer-close1').click();
                    //     }, function () {
                    //         table_searchs[k] = $('form[lay-filter=' + k + '-form]').prop("outerHTML");
                    //         $('form[lay-filter=' + k + '-form] .zsa-filed-item').each(function (i, e) {
                    //             var table_search_data = {
                    //                 field: $(this).find('select[name=fieldName]').val(),
                    //                 formula: $(this).find('select[name=formula]').val(),
                    //                 value: $(this).find('input[name=value]').val()
                    //             };
                    //             if (!table_search_datas[k]) table_search_datas[k] = {};
                    //             table_search_datas[k][$(this).attr('zsa-item-index')] = table_search_data;
                    //         });
                    //     }, 500, 350, {
                    //         btn: ['关闭'],
                    //         move: false,
                    //         success: function (index, layero) {
                    //             if (table_search_datas[k])
                    //                 $.each(table_search_datas[k], function (i, e) {
                    //                     var item = $('form[lay-filter=' + k + '-form] div[zsa-item-index=' + i + '].zsa-filed-item');
                    //                     if (item.find('select[name=fieldName]').html() != undefined) item.find('select[name=fieldName]').val(e.field);
                    //                     if (item.find('select[name=formula]').html() != undefined) item.find('select[name=formula]').val(e.formula);
                    //                     if (item.find('input[name=value]').html() != undefined) item.find('input[name=value]').val(e.value);
                    //                 });
                    //             form.render(null, k + "-form");
                    //         }
                    //     });
                    //     break;
                }
            });
            // 绑定form的submit事件
            // form.on('submit(' + k + '-search)', function (data) {
            //     var thisTable = getTable(k + '-table'), search_datas = [];
            //     $('form[lay-filter=' + k + '-form] .zsa-filed-item').each(function (i, e) {
            //         if ($(this).find('select[name=fieldName]').val() != '')
            //             search_datas.push({
            //                 field: $(this).find('select[name=fieldName]').val(),
            //                 formula: $(this).find('select[name=formula]').val(),
            //                 value: $(this).find('input[name=value]').val()
            //             });
            //     });
            //     $('div[lay-filter=LAY-table-' + thisTable.config.index + '] button[lay-event=sys_search]').html("<i class=\"layui-icon\">&#xe615;</i>搜索" + (search_datas.length > 0 ? ' (' + search_datas.length + ')' : ''));
            //     thisTable && thisTable.query({searchs: JSON.stringify(search_datas)});
            //     return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            // });

            //初始化搜索按钮
            var tool_temp = $('div[lay-id=' + k + '-table].layui-table-view .layui-table-tool .layui-table-tool-temp');
            var tool = tool_temp.find('.layui-btn-container').html() ? tool_temp.find('.layui-btn-container') : tool_temp;
            var searchBtn = $('<button class="layui-btn layui-btn-sm" lay-event="sys_search"><i class="layui-icon">&#xe615;</i>搜索</button>');
            complexSearch.render({
                btn: searchBtn,
                search: function (data) {
                    searchBtn.html("<i class=\"layui-icon\">&#xe615;</i>搜索" + (data.length > 0 ? ' (' + data.length + ')' : ''));
                    thisTable && thisTable.query({searchs: JSON.stringify(data)});
                },
                data: table_search_fields
            });
            tool.append(searchBtn);

        });


        table.on('tool(page-table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var thisTable = getTable('page-table');
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent == 'edit-table') {
                lutil.open_iframe('编辑表格--' + data.title, '${pageContext.request.contextPath}/back/page_config/table_list.view?id=' + data.id, '100%', '100%');
            }
        });

        // $('body').on('click', '.zsa-search-close', function (e) {
        //     $(this).closest('div.zsa-filed-item').remove();
        // });
        // $('body').on('click', '.zsa-search-add', function (e) {
        //     var item = $(search_temp_item), thisform = $(this).closest('form'),
        //         selectHtml = '<option value=""></option>';
        //     $.each(table_search_fields[thisform.attr('zsa-id')], function (i, e) {
        //         selectHtml = selectHtml + '<option value="' + e.field + '">' + e.title + '</option>';
        //     });
        //     item.attr('zsa-item-index', "index" + (thisform.find('div.zsa-filed-item').length + 1)),
        //         item.find('select[name=fieldName]').html(selectHtml), thisform.find('div.search-content').append(item),
        //         form.render(null, thisform.attr('lay-filter'));
        // });


        $(window).resize(function () {
            height = $(window).height() - $('.x-nav').outerHeight() - 50;
            height_value = height > 300 ? parseInt(height) : 300;
            if (!wait) {
                wait = true;
                setTimeout(function () {
                    wait = false
                }, 3000);
                $.each(table_classs, function (i, e) {
                    e.config.elem.hasClass('zsa-auto-height') && e.reload({height: height_value});
                });
            }
        });
    });
</script>
</body>

</html>
